<template>
  <view>
    <view class="order-list">
      <view
        class="order-card"
        v-if="
          orderState == 1 ||
          orderState == 2 ||
          orderState == 3 ||
          orderState == 4 ||
          orderState == 7
        "
      >
        <view class="service-cycle bor-bot">
          <view class="cycle-icon" style="margin-bottom: 10rpx">服务信息</view>
          <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
            订单编号：
            <view style="display: inline-block">
              {{ serviceInfo.orderNumber }}
            </view>
            <view class="copy-btn" @click="copy(serviceInfo.orderNumber)"
              >复制</view
            >
          </view>
          <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
            服务项目：
            <view style="display: inline-block">
              {{ serviceInfo.orderServer }}
            </view>
          </view>
          <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
            订单金额：
            <view style="display: inline-block"
              >￥{{ serviceInfo.orderAmout }}</view
            >
          </view>
          <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
            退回路径：
            <view style="display: inline-block">
              {{ serviceInfo.refundUrl }}
            </view>
          </view>
        </view>
        <view class="service-des">
          <view class="des-top">退款后订单关闭将无法恢复,优惠券无法返还</view>
          <view class="des-top">
            依据
            <span style="color: #4e9ce6" @click="toAgreement"
              >《医家养服务退款规则》</span
            >
            ,预计退款{{ serviceInfo.orderRefurdAmout }}元,如
            有疑问请咨询平台客服
          </view>
        </view>
        <view style="margin: 0 40rpx">
          <u--form
            labelPosition="top"
            :model="model"
            :rules="rules"
            ref="uForm"
          >
            <u-form-item
              labelWidth="300"
              label="请选择取消原因"
              prop="cancelInfo.cancelReason"
            >
              <u-radio-group
                iconPlacement="right"
                placement="column"
                v-model="radiovalue"
                @change="groupChange"
              >
                <u-radio
                  class="custom-radio"
                  activeColor="rgb(25, 190, 107)"
                  v-for="(item, index) in radiolist"
                  :key="index"
                  :label="item.name"
                  :name="item.name"
                  :customStyle="{ marginBottom: '8px' }"
                ></u-radio>
              </u-radio-group>
            </u-form-item>
            <u-form-item
              v-if="radiovalue == '其他原因'"
              labelWidth="300"
              prop="cancelInfo.refundReason"
            >
              <u--textarea
                v-model="model.cancelInfo.refundReason"
                placeholder="请输入退款原因"
              ></u--textarea>
            </u-form-item>
          </u--form>
        </view>
      </view>
      <view v-if="orderState == 6 || orderState == 6.1">
        <view class="order-card">
          <view class="service-cycle">
            <view
              v-if="orderState == 6"
              class="cycle-icon"
              style="margin-bottom: 10rpx; width: 100%; font-size: 28rpx"
            >
              申请已提交,退款将在24小时内原路退回,请注意查收
            </view>
            <view
              v-if="orderState == 6.1"
              class="cycle-icon"
              style="margin-bottom: 10rpx; width: 100%; font-size: 28rpx"
              >退款成功</view
            >
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              {{ serviceInfo.orderServer }}：
              <view style="display: inline-block"
                >x{{ serviceInfo.dayCounts }}天</view
              >
            </view>
            <view
              class="service-container"
              style="margin-bottom: 10rpx; width: 100%"
            >
              <view class="service-item">{{ serviceInfo.orderCategory }}</view>
              <view class="order-box">
                <view class="order-price">
                  订单金额: &nbsp;&nbsp;&nbsp;
                  <view
                    style="color: #333; margin-left: 15rpx; padding-top: 5rpx"
                    >¥{{ serviceInfo.orderAmout }}</view
                  >
                </view>

                <view class="order-refund">
                  预计退款:&nbsp;&nbsp;&nbsp;
                  <view
                    style="
                      color: #fc6804;
                      margin-left: 15rpx;
                      padding-top: 5rpx;
                    "
                    >¥{{ serviceInfo.orderRefurdAmout }}</view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="order-card">
          <view class="service-cycle">
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              被照护人：
              <view style="display: inline-block">
                {{ serviceInfo.patientName }}
              </view>
            </view>
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              联系人：
              <view style="display: inline-block">
                {{ serviceInfo.createUser }}
              </view>
            </view>
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              退款原因：
              <view style="display: inline-block">
                {{ serviceInfo.orderCancel }}
              </view>
            </view>
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              服务周期：
              <view style="display: inline-block"
                >{{ serviceInfo.serverStart }} --
                {{ serviceInfo.serverEnd }}</view
              >
            </view>
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              已服务：
              <view style="display: inline-block">
                {{ patientInfo.serverOver }}
              </view>
            </view>
          </view>
        </view>
        <view class="order-card">
          <view class="service-cycle">
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              订单编号：
              <view style="display: inline-block">
                {{ serviceInfo.orderNumber }}
              </view>
            </view>
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              下单时间：
              <view style="display: inline-block">
                {{ serviceInfo.createTime }}
              </view>
            </view>
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              上门时间：
              <view style="display: inline-block">
                {{ serviceInfo.nurseStartTime }}
              </view>
            </view>
            <view class="cycle-date" style="margin-bottom: 10rpx; width: 100%">
              申请退款时间：
              <view style="display: inline-block">
                {{ serviceInfo.orderRefundTime }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="bottom-fixed-view"
      v-if="
        orderState == 1 ||
        orderState == 2 ||
        orderState == 3 ||
        orderState == 4 ||
        orderState == 7
      "
    >
      <view class="pay-view">
        <view class="pay-btn" style="width: 100%" @click="handleSubmit(1)">
          <view
            style="display: flex; justify-content: center; align-items: center"
          >
            <view>提交申请</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-fixed-view" v-if="orderState == 6">
      <view
        class="pay-view"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <view
          class="pay-btn"
          style="
            width: 40%;
            color: #333;
            background-color: #fff;
            border: 1px solid #c1c0c0;
          "
        >
          <view
            style="display: flex; justify-content: center; align-items: center"
          >
            <view>再次下单</view>
          </view>
        </view>
        <view class="pay-btn" style="width: 40%" @click="backToPre">
          <view
            style="display: flex; justify-content: center; align-items: center"
          >
            <view>确定</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-fixed-view" v-if="orderState == 6.1">
      <view
        class="pay-view"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <view
          class="pay-btn"
          style="
            width: 40%;
            color: #333;
            background-color: #fff;
            border: 1px solid #c1c0c0;
          "
          @click="delOrderHandle"
        >
          <view
            style="display: flex; justify-content: center; align-items: center"
          >
            <view>删除订单</view>
          </view>
        </view>
        <view class="pay-btn" style="width: 40%" @click="backToPre">
          <view
            style="display: flex; justify-content: center; align-items: center"
          >
            <view>再下一单</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import * as wxPay from "../../common/api/wxPay.js";
import {
  orderList,
  orderDetail,
  saveOrder,
  cancelOrder,
  delOrder,
  refundInfo,
  applyRefund,
} from "../../common/api/index.js";
export default {
  props: {
    isInIndex: false,
  },
  components: {},
  data() {
    return {
      serviceInfo: {},
      dayCounts: 0,
      endDay: "",
      startDay: "",
      orderState: "",
      orderId: "",
      // 单选框
      radiolist: [
        {
          name: "价格太贵",
          disabled: false,
        },
        {
          name: "服务选错",
          disabled: false,
        },
        {
          name: "服务周期/服务时长选错",
          disabled: false,
        },
        {
          name: "对护工不满意",
          disabled: false,
        },
        {
          name: "不需要了",
          disabled: false,
        },
        {
          name: "其他原因",
          disabled: false,
        },
      ],
      show: false,
      radiovalue: "",
      cancelInfo: {
        orderId: "",
        cancelReason: "",
        refundReason: "",
      },
      model: {
        cancelInfo: {
          orderId: "",
          cancelReason: "",
          refundReason: "",
        },
      },
      rules: {
        "cancelInfo.cancelReason": {
          type: "string",
          required: true,
          message: "请选择取消原因",
          trigger: ["change"],
        },
      },
    };
  },
  computed: {},
  mounted() { },
  onShow() { },
  onLoad(opt) {
    console.log("opt", opt);
    // 编辑
    if (opt.orderId) {
      this.orderId = opt.orderId;
      this.orderState = opt.orderState;
      this.model.cancelInfo.orderId = opt.orderId;
      refundInfo({
        orderId: opt.orderId,
      }).then((res) => {
        let data = res.data.data;
        this.serviceInfo = data;
        this.startDay = Date.parse(this.serviceInfo.serverStart);
        this.endDay = Date.parse(this.serviceInfo.serverEnd);
        this.serviceInfo.dayCounts = this.calculateDaysBetweenTimestamps(
          this.startDay,
          this.endDay
        );
      });
    }
  },
  methods: {
    toAgreement() {
      uni.navigateTo({
        url: `/nursingWorkerPages/pages/userAgreement/userAgreement?type=2`,
      });
    },
    backToPre() {
      uni.navigateBack();
    },
    groupChange(n) {
      this.cancelInfo.cancelReason = n;
      this.radiovalue = n;
      this.model.cancelInfo.cancelReason = n;
    },
    handleSubmit(val) {
      if (val == 1) {
        this.applyHandle();
      }
    },
    // 删除
    delOrderHandle() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除？",
        showCancel: true,
        cancelText: "取消",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            delOrder({ orderId: this.orderId })
              .then((res) => {
                if (res.code == 200) {
                  uni.showToast({
                    icon: "success",
                    title: res.msg,
                  });
                }
              })
              .finally(() => {
                that.refresh();
              });
          }
        },
      });
    },
    // 复制订单号
    copy(value) {
      console.log("value", value);
      uni.setClipboardData({
        data: value,
        success: function () {
          console.log("success");
          uni.showToast({
            title: "复制成功",
            icon: "success",
            duration: 2000,
          });
        },
        fail: (error) => {
          console.log("失败", error);
          uni.showToast({
            title: "复制失败",
            icon: "none",
          });
        },
      });
    },
    // 添加
    applyHandle() {
      if (!this.model.cancelInfo.cancelReason) {
        uni.showToast({
          icon: "none",
          title: "请勾选用取消原因！",
        });
        return false;
      }
      if (this.model.cancelInfo.cancelReason == "其他原因") {
        if (!this.cancelInfo.refundReason) {
          uni.showToast({
            icon: "none",
            title: "请填写取消原因！",
          });
        } else {
          this.model.cancelInfo.cancelReason = this.cancelInfo.refundReason;
        }
      }
      let params = {
        orderCancel: this.model.cancelInfo.cancelReason,
        orderId: this.orderId,
      };

      console.log("params", params);
      applyRefund(params).then((res) => {
        console.log("res", res);
        if (res.data.code == 200) {
          uni.showToast({
            title: res.data.msg,
          });
          uni.navigateBack();
        }
      });
    },
    onChange(value) {
      if (this.orderState == 0) {
        this.serverCycle = value;
      }
    },
    // 计算天数
    calculateDaysBetweenTimestamps(timestamp1, timestamp2) {
      if (timestamp1 && timestamp2) {
        // 将时间戳转换为Date对象
        const startDate = new Date(timestamp1); // 注意JavaScript时间戳是毫秒级，所以乘以1000
        const endDate = new Date(timestamp2);
        startDate.setHours(0, 0, 0, 0);
        endDate.setHours(0, 0, 0, 0);

        if (endDate.getTime() == startDate.getTime()) {
          return 1;
        }
        // 确保startDate早于endDate
        if (startDate < endDate) {
          // 计算两个日期之间的毫秒差
          const timeDifference = endDate.getTime() - startDate.getTime();

          // 将毫秒差转换为天数，包含开始和结束日期
          const daysDifference = Math.floor(
            timeDifference / (1000 * 60 * 60 * 24)
          );
          // 四舍五入到最近的整数
          // daysDifference = Math.round(daysDifference);

          return daysDifference + 1;
        }
        if (startDate > endDate) {
          uni.showToast({
            title: "时间范围不正确！",
            icon: "none",
          });
          return 0;
        }
      }
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.top-tab-bar {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, 150rpx);
  grid-template-rows: repeat(auto-fit, 66rpx);
  grid-column-gap: 20rpx;
  grid-row-gap: 26rpx;
  background: #f9f9f9;

  // position: sticky;
  // top: 0;
  // z-index: 2;
  .tab-item {
    width: 150rpx;
    height: 66rpx;
    background: #f1f1f1;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(35, 35, 35, 0.8);
    font-size: 26rpx;
  }

  .tab-item-selected {
    background: #dff0ef;
    color: #0bc5ae;
  }
}

.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .title-and-status {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .title-left {
      display: flex;
      justify-content: flex-start;
      width: 70%;
      align-items: flex-end;

      .title-main {
        color: #333333;
        font-size: 35rpx;
        font-weight: 700;
        margin-right: 10rpx;
      }

      .subhead {
        color: #747474;
        font-size: 28rpx;
      }
    }

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status {
      font-size: 30rpx;
      font-weight: 700;
      color: #333333;

      .status-price {
        color: #ffb35b;
      }
    }
  }

  .item-tag {
    display: flex;
    justify-content: flex-start;
    // width: 80%;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;
    min-height: 130rpx;

    .service-tag {
      min-width: 110rpx;
      background-color: #eafaf5;
      font-size: 20rpx;
      color: #6f7070;
      padding: 10rpx;
      height: 50rpx;
      line-height: 30rpx;
      text-align: center;
      border-radius: 25rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .cycle-and-price {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    color: #6c6c6c;
    margin-top: 10rpx;

    .cycle {
      width: 80%;
    }

    .price {
    }
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.del-btn {
  width: 60rpx;
  height: 40rpx;
  border: solid 2rpx #c5070a;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5070a;
  font-size: 14rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.service-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.service-btn .my-btn:not(:last-child) {
  margin-right: 10rpx;
}

.my-btn {
  min-width: 140rpx;
  height: 58rpx;
  line-height: 58rpx;
  border: 1rpx solid #d0d0d0;
  border-radius: 40rpx;
  color: #787878;
  text-align: center;
}

.btn-green {
  border-color: #04bdb3;
  color: #04bdb3;
}

.service-cycle {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;

  .cycle-icon {
    width: 200rpx;
    height: 50rpx;
    line-height: 50rpx;
    // padding-left: 50rpx;
    // background: url(/nursingWorkerPages/static/shijian.png) no-repeat left center;
    background-size: 40rpx 40rpx;
    font-weight: 700;
    font-size: 30rpx;
  }

  .cycle-date {
    width: 70%;
    font-size: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .service-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    .service-item {
      width: 100%;
    }

    .order-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      margin-top: 50rpx;
      .order-price {
        margin-left: 15rpx;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .order-refund {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

::v-deep.uni-icons {
  display: none !important;
}

.client-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  .info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;

    .patient-info {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      align-items: center;
      color: #adadad;

      .patien-item {
        margin: 10rpx 40rpx 10rpx 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .patien-content {
          display: inline-block;
          max-width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .info-title {
      font-size: 30rpx;
      font-weight: 700;

      .info-icon {
        width: 250rpx;
        height: 50rpx;
        line-height: 50rpx;
        padding-left: 50rpx;
        background: url(https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/lianxiren.png)
          no-repeat left center;
        background-size: 40rpx 40rpx;
        font-weight: 700;
        font-size: 30rpx;
      }
    }
  }
}

.arrow {
  width: 10%;
  color: #cdcdcd;
}

.bottom-fixed-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  border-top-left-radius: 30rpx;
  border-top-left-radius: 30rpx;
  padding-bottom: 20rpx;
  .agreement-view {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    border-bottom: solid 2rpx #f2f2f2;

    .text {
      color: rgba(35, 35, 35, 0.5);
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .agreement {
        color: #6279f9;
      }
    }

    .item {
      color: #0bc5ae;
    }
  }

  .pay-view {
    width: 100%;
    height: 116rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    box-sizing: border-box;
    color: #232323;
    font-size: 26rpx;
    mmargin-left: 10rpx;

    .show-details {
      flex: 1;
      margin-left: 28rpx;
      font-size: 24rpx;
      color: #0bc5ae;

      .icon {
        width: 24rpx;
        height: 24rpx;
      }
    }

    .pay-btn {
      // min-width: 260rpx;
      padding: 0 30rpx;
      height: 88rpx;
      // line-height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fc6804;
      // background: #ff0000;
      color: white;
      border-radius: 48rpx;
      font-size: 30rpx;
      // margin-left: 160rpx;
    }
  }
}

.select-button {
  width: 40rpx;
  height: 40rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.save {
  background: #fbb15c !important;
  margin-right: 10rpx;
}
::v-deep.uni-date-x {
  padding: 0 !important;
}

// 服务详情
.service-detail {
  font-weight: 700;
  font-size: 30rpx;
  margin: 30rpx;
  width: 100%;
  .title-right {
    font-weight: normal;
    margin-left: 20rpx;
  }
}
.d-s {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.service-box {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 10rpx;
  }
  .left {
    color: #ababab;
    margin-right: 10rpx;
    width: 160rpx;
  }
  .right {
    text-align: left;
    display: inline-block;
    width: 100%;
  }
  .notice {
    margin: 20rpx 0;
    border-top: 1rpx solid #c7c7c7;
    .notice-title {
      font-weight: 700;
      padding: 10rpx 0;
    }
    .notice-content {
      font-size: 25rpx;
      color: #333;
      width: 100%;
      // white-space: pre-line;
      text-align: justify;
      line-height: 40rpx;
    }
  }
}

.service-container {
  .title {
    border: 1rpx solid #c7c7c7;
    padding: 10rpx;
    text-align: center;
    margin-bottom: 15rpx;
    font-weight: 700;
  }
  .service-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .service-item {
      width: 48%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .top image {
        width: 300rpx;
        height: 200rpx;
        border: 1rpx solid #c1c1c1;
      }
      .top-img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        border: 1rpx solid #333;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bottom {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // flex-direction: column;

        min-height: 150rpx;
        .name {
          text-align: center;
          font-weight: 700;
          font-style: 20rpx;
          height: 50rpx;
        }
        .content {
          font-size: 25rpx;
          background-color: #f5f3f3;
          padding: 10rpx;
        }
      }
    }
  }
}

.service-border {
  border: 1rpx solid #c1c1c1;
  border-radius: 10rpx;
  padding: 10rpx;
}

.instructions {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  margin-bottom: 230rpx;
  .instructions-item {
    padding: 10rpx;
    .top {
      color: #9e9e9e;
    }
  }
}

.container1 {
  display: flex;
  flex-direction: column;
}

.header {
  padding: 10px;
  // background-color: #f1f1f1;
  text-align: center;
  cursor: pointer;
}

.content1 {
  margin: 0 30rpx;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-height: 0;
  padding: 0 15rpx;
  .detail-title {
    font-weight: 700;
    font-size: 40rpx;
    text-align: center;
    padding: 15rpx 0;
  }
  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e2e2e2;
    padding: 15rpx 30rpx;
  }
}

.content1.open {
  max-height: 500px; /* 这个值应该根据你的内容最大高度适当调整 */
}
// 顶部标题
.service-item-title {
  position: relative;
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;
  .service-item-title-content {
    font-size: 40rpx;
    font-weight: 700;
    margin-bottom: 45rpx;
    white-space: normal;
    overflow-y: hidden;
    width: 500rpx;
  }
  .service-item-price {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5rpx;
    right: 0;
  }
  .service-item-count {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5rpx;
    left: 0;
    font-size: 30rpx;
  }
  .service-item-total {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5rpx;
    right: 0;
    font-size: 30rpx;
  }
}
.bor-bot {
  border-bottom: 1rpx solid #ececec;
}

// 单选框
.radio-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
  .time-option {
    padding: 10rpx;
    // margin-bottom: 10rpx;
    border-radius: 5rpx;
    text-align: center;
    transition: background-color 0.3s;
    background-color: #f1f1f1;
    margin-right: 15rpx;
    border-radius: 10rpx;
    &.selected {
      background-color: #fd6802;
      color: #fff; // 文字颜色可以根据需要调整
    }
  }
}
// 订单状态
.order-status-title {
  font-size: 35rpx;
  text-align: left;
  font-weight: 700;
  padding: 20rpx 30rpx;
}

.copy-btn {
  width: 100rpx;
  border-radius: 50rpx;
  border: 1rpx solid #ececec;
  text-align-last: center;
  padding: 0 5rpx;
  display: inline-block;
  margin-left: 10rpx;
}
.service-des {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  .des-top {
    background-color: #fafafa;
    padding: 10rpx;
    margin: 10rpx 0;
  }
}
</style>
